<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加用户</title>
</head>
<body>
   <!--写一个添加用户的表单，用户属性有：username, email, gender, school--> 
   <form>
       <label for="username">用户名：</label>
       <input type="text" id="username" name="username" required><br><br>
       <label for="email">邮箱：</label>
       <input type="email" id="email" name="email" required><br><br>
       <label for="gender">性别：</label>
       <input type="radio" id="male" name="gender" value="male" required>
       <label for="male">男</label>
       <input type="radio" id="female" name="gender" value="female" required>
       <label for="female">女</label><br><br>
       <label for="school">学校：</label>
       <input type="text" id="school" name="school" required><br><br>
       <input type="submit" value="提交">
   </form>
   <!--用javascript获得表单数据，以json格式发送到/addUser-->
   <script>
       var form = document.querySelector('form');
       form.addEventListener('submit', function(event) {
           event.preventDefault();
           var username = document.querySelector('#username').value;
           var email = document.querySelector('#email').value;
           var gender = document.querySelector('input[name="gender"]:checked').value;
           var school = document.querySelector('#school').value;
           var data = {
               username: username,
               email: email,
               gender: gender,
               school: school
           };
           fetch('/addUser', {
               method: 'POST',
               headers: {
                   'Content-Type': 'application/json'
               },
               body: JSON.stringify(data)
           })
           .then(response => response.json())
           .then(data => {
               console.log('Success:', data);
           })
           .catch((error) => {
               console.error('Error:', error);
           });
   });
   </script>
</body>
</body>
</html>